<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./imgNew_7.css" />
  </head>
  <style>
    .parentBox,
    .parentBox2 {
      width: 800px;
      height: 600px;
      position: relative;
      /* border: 1px solid #f00; */
    }
  </style>

  <body>
    <div class="parentBox">
      <!-- 内容 -->
      <div class="newImg7_container">
        <div class="container">
          <div class="item itemActive">
            <img src="./articleImg/image1.jpg" alt="" />
            <span>杭州复工复产后首座光伏电站并网1</span>
          </div>
          <div class="item">
            <img src="./articleImg/image2.jpg" alt="" />
            <span>杭州复工复产后首座光伏电站并网2</span>
          </div>
          <div class="item">
            <img src="./articleImg/image3.jpg" alt="" />
            <span>杭州复工复产后首座光伏电站并网3</span>
          </div>
          <div class="item">
            <img src="./articleImg/image4.jpg" alt="" />
            <span>杭州复工复产后首座光伏电站并网4</span>
          </div>
          <div class="item">
            <img src="./articleImg/image5.jpg" alt="" />
            <span>杭州复工复产后首座光伏电站并网5</span>
          </div>
          <div class="item">
            <img src="./articleImg/image6.jpg" alt="" />
            <span>杭州复工复产后首座光伏电站并网6</span>
          </div>
          <div class="item">
            <img src="./articleImg/image7.jpg" alt="" />
            <span>杭州复工复产后首座光伏电站并网7</span>
          </div>
          <div class="item">
            <img src="./articleImg/image8.jpg" alt="" />
            <span>杭州复工复产后首座光伏电站并网8</span>
          </div>
        </div>
        <!-- 指示点 -->
        <div class="bots">
          <div class="pot active" data-index="0"></div>
          <div class="pot" data-index="1"></div>
          <div class="pot" data-index="2"></div>
          <div class="pot" data-index="3"></div>
          <div class="pot" data-index="4"></div>
          <div class="pot" data-index="5"></div>
          <div class="pot" data-index="6"></div>
          <div class="pot" data-index="7"></div>
        </div>
        <div class="leftArrow arrow"></div>
        <div class="rightArrow arrow"></div>
      </div>
    </div>
    <div class="parentBox2"></div>
    <script src="./jquery.min.js"></script>
    <script>
      var options = []
      for (var index = 0; index < 8; index++) {
        var o = {
          header: '标题' + (index + 1),
          author: '作者' + (index + 1),

          aritcleImg: './articleImg/image' + (index + 1) + '.jpg',
          gif: './img/' + (index + 1) + '.gif',
          body: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis excepturi pariatur quasi commodi harum numquam ullam sint modi dolor asperiores quisquam necessitatibus assumenda cupiditate, distinctio tempore nulla dolorum dolores illo?'
        }
        options.push(o)
      }
      function buildDom(options) {
        var content = '<div class="newImg7_container"></div>'
        $('.' + 'parentBox2').append(content)
        var leftArrow = '<div class="leftArrow arrow"></div>'
        $('.' + 'parentBox2' + ' .newImg7_container').append(leftArrow)
        var rightArrow = '<div class="rightArrow arrow"></div>'
        var container = '<div class="container">'
        for (var index = 0; index < options.length; index++) {
          container += '<div class="item">\n                    <img src="./articleImg/image' + (index + 1) + '.jpg" alt="">\n                    <span>' + options[index].header + '</span>\n                </div>'
        }
        container += '</div>'
        $('.' + 'parentBox2' + ' .newImg7_container').append(container)
        console.log($($('.parentBox2 .item')[0]).addClass('itemActive'))
        var bots = '<div class="bots">'
        for (var index = 0; index < options.length; index++) {
          bots += '<div class="pot" data-index="' + index + '"></div>'
        }
        bots += '</div>'
        $('.' + 'parentBox2' + ' .newImg7_container').append(bots)
      //  $($('.' + 'parentBox2' + ' .newImg7_container .pot')[0]).addClass('active');
        $('.' + 'parentBox2' + ' .newImg7_container').append(rightArrow)
      }
      // console.log(1111);

      buildDom(options)
    </script>
    <script src="./imgNew_7.js"></script>
    <script>
      operation('parentBox')
      operation('parentBox2')
    </script>
  </body>
</html>
